<template>
	<view class="calendar">
		<view class="zsy-calendar">
			<zsyCalendar
				:sundayIndex="6"
				@change="change"
        	/>
		</view>
		<Activity :newsPanelHeight="newsPanelHeight"></Activity>
		<v-tabbar :tabbarIndex="1"></v-tabbar>
	</view>
</template>

<script>
import zsyCalendar from '@/components/zsy-calendar/zsy-calendar'
import Activity from './components/activity.vue'

export default {
	components: {
        zsyCalendar,
		Activity
    },
	data() {
		return {
			newsPanelHeight: 0
		}
	},
	methods: {
		change(e) {
            console.log(e)
        }
	},
	onReady(){
		let _this = this;

		uni.getSystemInfo({
		    success: function (res) {
				uni.createSelectorQuery().select('.zsy-calendar').boundingClientRect(data => {
					_this.newsPanelHeight = res.windowHeight - data.height - 75
				}).exec()
		    }
		});
	},
	onShow() {
		uni.hideTabBar({
			animation: false
		})
	},
	onLoad() {

	},
}
</script>

<style lang="scss" scoped>
.calendar{
	background: $uni-bg-color-grey;
	height: 100vh;
	box-sizing: border-box;
	overflow: hidden;
	.zsy-calendar{
		box-shadow: 0px 5px 8px 0px #4E507C1A;
	}
}
	
</style>
